<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="../tld.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="/static/sass/common/ydui.css" />
    <link rel="stylesheet" href="/static/stylesheets/product/product_detail.css" />
    <!-- 引入自适应解决方案类库 -->
    <script src="/static/scripts/libs/ydui.flexible.js"></script>
</head>
<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box" style="margin-bottom: 56px;">
            <div class="product-info">
                <div class="pro-logo">
                    <img  src="${baseImgUrl}${goods.image}" alt="">
                </div>
                <div class="pro-title">
                    ${goods.name}
                </div>
                <div class="pro-price">
                    <span class="current-price">￥${goods.singleDiscount }</span>
                    <del class="old-price">￥${goods.singleUnitPrice }</del>
                </div>
                <div class="pro-detail">
                    <div id="goods_title">
                        <div class="pro-desc on">
                            商品详情
                        </div>
                        <div class="pro-desc">
                            商品评价
                        </div>
                    </div>
                    
                </div>
                <div id="goods_dis" class="pro-detail">
                    <div class="img-list">
                        ${goods.detail }
                    </div>
                    <div class="assess-list"  id="J_List" style="display: none;">
                        <ul id="J_ListContent">
                        	<c:if test="${fn:length(comments) > 0}">
                        	<c:forEach items="${comments}" var="item" varStatus="vs">
                        		<li>
                                <div class="userinfo">
                                	<c:set var="lastId" value='${item.id}'></c:set>
                                    <img src="${item.headImage }" alt="">
                                    <h2>${item.nickName }</h2>
                                    <p>
                                        <c:forEach begin="1" end="${item.grade}">
		                                    		<i class="icon-star"></i>
		                                    	</c:forEach>
		                                    	<c:forEach begin="1" end="${5-item.grade}">
		                                    		<i class="icon-star gray"></i>
		                                    	</c:forEach>
                                    </p>
                                </div>
                                <div class="discp">
                                    <p>${item.comment }<span><fmt:formatDate value="${item.commentTime}" type="both"/></span></p>
                                </div>
                            </li>
                        	</c:forEach>
                        	</c:if>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 底部导航开始 -->
        <footer class="footer" style="overflow: hidden; width: 100%; height: 56px; position: fixed; bottom: 0; left: 0; background: #fff;">
            <div class="m-tabbar" style="padding: 3.5px;">
                <a href="${base}/index/index" class="tabbar-item">
                    <span class="tabbar-icon">
                        <i class="icon-home-outline"></i>
                    </span>
                    <span class="tabbar-txt">商城</span>
                </a>
                <a href="${base}/cart/index?uid=${uid}" class="tabbar-item">
                    <span class="tabbar-icon">
                        <i class="icon-shopcart-outline"></i>
                        <span id="cartcount" class="badge badge-danger" <c:if test="${cartcount == 0}"> style="display: none;"</c:if>>${cartcount}</span>
                    </span>
                    <span class="tabbar-txt">购物车</span>
                </a>
            </div>
            <div class="right">
                <div class="shopping-car-btn">
                    加入购物车
                </div>
                <div class="current-buy">
                    立即购买
                </div>
            </div>
        </footer>
        <!-- 底部导航结束 -->
    <div id="dialog" class="product-box">
        <div class="product-dialog-main" style="width: 100%;">
            <div class="pro-info">
                <div class="pro-img">
                    <img  src="${baseImgUrl}${goods.image}" alt="">
                </div>
                <div class="pro-item">
                    <div class="title">
                        ${goods.name }
                    </div>
                    <div class="price">
                        ￥${goods.singleDiscount }
                    </div>
                </div>
            </div>
            <div class="count-info">
                <div class="count-type" id="type_btn">
                    <div class="type1-btn">
                        <span class="type_btn on">零买</span>
                    </div>
                    <div class="type2-btn">
                        <span class="type_btn">整箱买</span>
                    </div>
                </div>
                <div class="count-num">
                    <div class="text">
                        购买数量
                    </div>
                    <div class="num">
                        <span class="m-spinner" data-ydui-spinner="{input: '.J_Input', add: '.J_Add', minus: '.J_Del'}"><!-- 添加data-ydui-spinner属性并添加参数即可 -->
                            <a href="javascript:;" class="J_Del"></a>
                            <input type="text" id="buyNum" class="J_Input" placeholder=""/>
                            <a href="javascript:;" class="J_Add"></a>
                        </span>

                    </div>
                    <div class="unit">
                        <span>罐</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <div class="submit-btn">
                确定
            </div>
        </div>
    </div>
    </div>


    <!-- 引入jQuery 2.0+ -->
    <script src="../../../static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="../../../static/scripts/libs/ydui.js"></script>
    <script>
    	var dotype = 0; //购物车
            $('.shopping-car-btn').on('click',function(){
                $('#dialog').show();
                dotype = 0;
            });
            $('.current-buy').on('click',function(){
                $('#dialog').show();
                dotype = 1;//下订单
            });
            var buyNum = 1;
            $('.submit-btn').on('click',function(){
            	buyNum = $("#buyNum").val();
                $('#dialog').hide();
                var goodsId = ${goods.id};
                var url = "${base}/cart/addcarts";
                var data = {goodsId:goodsId,buyType:type,buyNum:buyNum,userId:uid};
                //提交订单或者购物车
                if(dotype == 0){
                	//ajax提交
	                $.ajax({
	                    type: 'GET',
	                    url: url,
	                    data:data,
	                    dataType: 'json',
	                    success: function(data){
	                        //购物车
	                        if(dotype == 0){
	                        	console.log("返回的购物车数量为"+data.data);
	                        	if(data.data > 0){
		                        	$("#cartcount").show();
		                        	$("#cartcount").html(data.data);
	                        	}
	                        }
	                    },
	                    error: function(xhr, type){
	                        alert('Ajax error!');
	                        // 即使加载出错，也得重置
	                    }
	                });
                }else{
                	 window.location.href = '${base}/order/preorder?goodsId='+goodsId+'&buyType='+type+'&buyNum='+buyNum+'&userId='+uid;
                }
            });
        
        var type = 0;
        $('#type_btn').on('click', 'span', function(){
            $('#type_btn').find('span').removeClass('on')
            $(this).addClass('on')
            if($(this).html() == '零买'){
                $('.unit span').html('罐')
                type = 0;
            }else{
                $('.unit span').html('箱') 
                type = 1;
            }
            
        })
        
        $('#goods_title').children('div').on('click', function(){
            var index = $(this).index();
            $(this).addClass('on').siblings().removeClass('on');
            $('#goods_dis').children().eq(index).show().siblings().hide()
        })
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, size = 20;
        window.onload=function(){
	        lastId = '${lastId == null ? 0 :lastId}';
	        var initLoad = false;
	        if(lastId == 0){
	        	initLoad = true;
	        }
	        $('#J_List').infiniteScroll({
	            pageSize: size,
	            initLoad: initLoad,
	            loadingHtml: '<strong id="loading">加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
	            loadListFn: function () {
	                var def = $.Deferred();
	
	                /* 通过自定义的方法获取数据 */
	                $.ajax({
	                    url: '${base}/index/getcomments',
	                    dataType: 'json',
	                    data: { goodsId: '${goods.id}', size:size,which:-1,lastId:lastId },
	                    success: function (ret) {
	                        /* 假设ret.list为后端返回的列表数组 */
	
	                        /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
	                        /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */
	                        var shtml = '';
	                    	var data = ret.data;
	                    	if(ret.code == 0){
	                    		
		                        for(var i = 0; i < data.length; i ++){
		                        	lastId = data[i].id;
		                            shtml += '<li>\
		                                                <div class="userinfo">\
		                                                    <img src="'+data[i].headImage+'" alt="">\
		                                                    <h2>'+data[i].nickName+'</h2><p>';
		                                                    for(var j = 0; j < data[i].grade; j ++){
		                                                    	shtml += '<i class="icon-star"></i>';
		                                                    }
		                                                    for(var j = 5-data[i].grade; j > 0; j --){
		                                                    	shtml += '<i class="icon-star gray"></i>';
		                                                    }
		                                                    
		                                                    shtml +='</p>\
		                                                </div>\
		                                                <div class="discp">\
		                                                    <p>'+(data[i].comment == null ? "" : data[i].comment)+'</p>\
		                                                </div>\
		                                            </li>';
		                        }
	                    	}
	                        console.log(ret);
	                        $('#J_ListContent').append(shtml);
	
	                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
	                        if(ret.data.length == 0) {
	                            $('#loading').html('没有评论数据了')
	                            return
	                        };
	                        def.resolve(ret.data);
	
	                        /* 页码自增1 */
	                        ++ page;
	                    }
	                });
	
	                return def.promise();
	            }
	        });
        }
    </script>
</body>

</html>
